<template>
  <div>
    <!-- <div>{{ruleForm}}</div> -->
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">编辑人员</div>
        </div>
        <!-- 单位信息 -->

        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">单位信息</div>

          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="工号">
                  <el-input v-model="ruleForm.people_id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="姓名">
                  <el-input v-model="ruleForm.people_name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单位名称" prop="people_name">
                  <el-input
                    v-model="ruleForm.buildCompany.company_name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话">
                  <el-input v-model="ruleForm.people_tele"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="户籍地址">
                  <el-input v-model="ruleForm.people_addr"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_status">
                  <div>人员状态</div>
                  <el-select
                    v-model="ruleForm.people_status"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄" prop="people_age">
                  <el-input v-model="ruleForm.people_age"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="dang">
                <el-form-item label="党员" prop="people_member">
                  <el-radio-group v-model="ruleForm.people_member">
                    <el-radio :label="0">非党员</el-radio>
                    <el-radio :label="1">党员</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row>
              <!-- <div>{{ruleForm.date1}}</div> -->
              <el-col :span="6">
                <el-form-item prop="people_cardstart">
                  <span>身份证办证日期</span>
                  <div>
                    <el-date-picker
                     format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                     class="padding"
                     v-model="ruleForm.people_cardstart"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_nation">
                  <span>身份证失效日期</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="padding"
                      v-model="ruleForm.people_cardend"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="people_started">
                  <span>入场时间</span>
                  <div>
                    <el-date-picker
                      class="padding"
                       format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      v-model="ruleForm.people_started"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="job_id">
                  <div>管理人员职务类型</div>
                  <el-select
                    v-model="ruleForm.buildJob.job_id"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in linput2"
                      :key="item.job_id"
                      :label="item.job_name"
                      :value="item.job_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第四行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="民族" prop="people_nation">
                  <el-input v-model="ruleForm.people_nation"></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="6">
                <el-form-item prop="people_give">
                  <div>下发设备</div>
                  <el-select
                    v-model="ruleForm.people_give"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :span="6" class="dang">
                <el-form-item label="性别" prop="people_sex">
                  <el-radio-group v-model="ruleForm.people_sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="身份证号码" prop="people_cardid">
                  <el-input v-model="ruleForm.people_cardid"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- <div class="l-addrygl-3">
          <div class="l-addrygl-3-1">证书管理</div>
          <div class="l-addrygl-3-2">
            <el-row>
              <el-col :span="6">
                <el-form-item label="专业名称" prop="DanWeiName">
                  <el-input v-model="ruleForm.DanWeiName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="民族" prop="DanWeiName">
                  <el-input v-model="ruleForm.DanWeiName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="民族" prop="DanWeiName">
                  <el-input v-model="ruleForm.DanWeiName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="name">
                  <div>下发设备</div>
                  <el-select v-model="ruleForm.name" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div> -->

        <!-- 劳务合同 -->
        <div class="l-addrygl-3">
          <div class="l-addrygl-3-1">劳务合同</div>
          <div class="l-addrygl-3-2">
            <el-row>
              <el-col :span="6">
                <el-form-item label="合同编号" prop="contract_code">
                  <el-input
                    v-model="ruleForm.buildContract.contract_code"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="contract_start">
                  <span>合同开始日期</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="padding"
                      v-model="ruleForm.buildContract.contract_start"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="contract_end">
                  <span>合同失效日期</span>
                  <div>
                    <el-date-picker
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      class="padding"
                      v-model="ruleForm.buildContract.contract_end"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 工作经历 -->
        <div class="l-addrygl-4">
          <div class="l-addrygl-4-1">
            <div class="l-addrygl-4-1-left">工作经历</div>
            <div class="l-addrygl-4-1-right" @click="GZadd()">添加</div>
          </div>
          <!-- 工作经历表格 -->

          <el-table
            ref="singleTable"
            :data="currList"
            highlight-current-row
            @current-change="handleCurrentChange"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            style="width: 100%"
          >
            <el-table-column align="center" type="index" width="50">
            </el-table-column>
            <el-table-column
              align="center"
              property="experience_start"
              label="开始日期"
              width="120"
            >
            </el-table-column>
            <el-table-column
              align="center"
              property="experience_end"
              label="结束日期"
              width="120"
            >
            </el-table-column>
            <el-table-column
              align="center"
              property="experience_job"
              label="管理人员职务"
            >
            </el-table-column>
            <el-table-column
              align="center"
              property="experience_company"
              label="原工作单位名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              property="experience_site"
              label="工地名称"
            >
            </el-table-column>
            <el-table-column property="do" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="del(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
         <div class="l-fen">
          <div class="f-fenye">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="tableData.length"
              :page-size="pageSize"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
        <!-- 工作经历模态框 -->
        <el-dialog title="工作经历添加" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <div class="gz-dialog">
              <el-row>
                <el-col :span="10">
                  <el-form-item prop="experience_start">
                    <span>开始时间</span>
                    <div>
                      <el-date-picker
                        format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                        class="padding"
                        v-model="form.experience_start"
                        type="date"
                        placeholder="选择日期"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item prop="experience_end">
                    <span>结束时间</span>
                    <div>
                      <el-date-picker
                        format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                        class="padding"
                        v-model="form.experience_end"
                        type="date"
                        placeholder="选择日期"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="职务" prop="experience_job">
                    <el-input v-model="form.experience_job"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item
                    label="原工作单位名称"
                    prop="experience_company"
                  >
                    <el-input v-model="form.experience_company"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="工地名称" prop="experience_site">
                    <el-input v-model="form.experience_site"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="motaikuang()">确 定</el-button>
          </div>
        </el-dialog>

        <div class="l-addryg-footer">
          <div class="l-tijiao">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
import http from "../api";
export default {
  data() {
    // var validateusername = (rule, value, callback) => {
    //   var reg = /^[a-zA-Z]\w{3,7}/;
    //   if (!reg.test(value)) {
    //     callback(new Error("请输入用户名"));
    //   } else {
    //     callback();
    //   }
    // };

    return {
       currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize:2,
      tableData: [], //工作经历表格
      dialogTableVisible: false,
      dialogFormVisible: false,
      // form: {
      //   people_id: "53",
      // }, //模态框input value值
      linput2: [],
      options1: [
        {
          value: 0,
          label: "待入场",
        },
        {
          value: 1,
          label: "入场",
        },
        {
          value: 2,
          label: "离场",
        },
      ],

      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      form: {
        experience_start: "",
        experience_end: "",
        experience_job: "",
        experience_company: "",
        experience_site: "",
      },
      buildContract:{},//劳务合同
      ruleForm: this.$route.params,
      ruleForm1: {
        people_id: this.$route.params.people_id,
        //  "buildExperience":this.form,
      },

      value: "",
      // 表单验证规则
      rules: {
        //  DanWeiName: [{ validator: validateDanWeiName, trigger: 'blur' }],
        // username: [{ validator: validateusername, trigger: "blur" }],
        // idcard: [{ validator: validateidcard, trigger: 'blur' }],
        // gonghao: [{ validator: validategonghao, trigger: 'blur' }],
      },
    };
  },
  mounted() {
   this.tableData.push(this.$route.params.buildExperience)
   console.log('this.tableData', this.tableData)
    this.setCurrList(1);
    console.log("人员管理编辑", this.ruleForm);
    http.input2({}).then((res) => {
      this.linput2 = res.data; //职务类型
      console.log("职务类型", res.data);
    });
    //  console.log(this.ruleForm);
  },
  methods: {
        // 改变当前页改变当前页展示
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
      // 改变当前页
        changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },
    del(index,row) {
      console.log('工作经历表格',row);
        let obj={}
        obj.people_id=row.people_id
       http.ldelBuildExperience(obj).then((res)=>{
         console.log('工作经历表格删除',res)
       })
       this.tableData.splice(index,1)
},
    // 工作经历表格
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 模态框确定
    motaikuang(form) {
      this.tableData.unshift(this.form);
      console.log("模态框确定", this.tableData);
      this.dialogFormVisible = false;
      // this.form.people_id = 53;
      console.log(this.form);
      this.ruleForm1.buildExperience = this.form;
      console.log("ruleForm表单", this.ruleForm1);
    this.setCurrList(1);
      // http.rygledittableadd(this.form).then(res=>{
      //   console.log('返回',res);
      // })
      // http.rygledittableadd(this.ruleForm1).then((res) => {
      //   console.log("返回", res);
      // });


    },
    // 模态框出现
    GZadd() {
      this.dialogFormVisible = true;
    },
    // 返回
    back() {
      this.$router.push({
        name: "人员管理",
      });
    },
    // 提交
    submitForm(ruleForm) {
      console.log("ruleForm表单日期参数", this.ruleForm.buildContract.contract_start);
      console.log(this.ruleForm.people_give);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
            console.log("ruleForm表单总参数", this.ruleForm);
          http.rygledit(this.ruleForm).then((res) => {
            console.log("编辑", res);
          });
          alert("编辑成功");
           this.$router.push({
             name:'人员管理'
           })
          // axios
          //   .post("http://192.168.43.131/buildPeople/updPeopleInfo", this.ruleForm)
          //   .then((res) => {
          //     // if (res.data.code === 200) {
          //     //    console.log(res);
          //     //   localStorage.setItem("userToken", res.data.data);
          //     //   this.$router.push({
          //     //     // name:'人员管理'
          //     //     name: "塔吊监测系统",
          //     //   });
          //     // } else if (res.data.code === 201) {
          //     //   // console.log(res)
          //     //   alert("用户不存在");
          //     // }
          //   });
          // console.log(this.ruleForm)
          // alert("注册成功");
          // this.$message({
          //   showClose: true,
          //   message: '注册成功',
          //   type: 'success',
          // });
          // var timer = setInterval(function showtime() {
          //   location.href = '/login';
          // }, 3000);
        } else {
          alert("注册失败");
          // this.$message({
          //   showClose: true,
          //   message: '注册失败',
          //   type: 'error',
          // });
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.l-fen {
  width: 100%;
  height: 60px;
   background: white; 
}
.f-fenye {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}
.el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
  padding-left: 5px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
  padding-left: 5px;
}
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 35px !important;
}

.el-form {
  /* margin-left: 20px; */
}
.el-row {
  /* width: 1150px; */
}
/* .el-input >>> .el-input__inner{
    display: inline-block !important;
} */
.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.l-addrygl-1 {
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.gz-dialog {
  width: 600px;
  margin: 0 auto;
  /* margin-left: 40px; */
}
.gz-dialog >>> .el-row {
  width: 600px;
}
.gz-dialog >>> .el-col {
  margin-left: 50px;
}
.l-addrygl-2 {
  width: 100%;
  height: 550px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.dang {
  margin-top: 40px;
}

.l-addrygl-3 {
  width: 100%;
  height: 182px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.l-addrygl-4 {
  width: 100%;
  height: 220px;
  padding-left: 20px;
  /* background: red; */
  background: white;
  margin-top: 20px;
}
.l-tijiao {
  width: 170px;
  height: 40px;
  float: right;

  /* background: white; */
  /* margin: 0 auto; */
  /* position: fixed; 
  bottom: 0;  */
}
/* .l-addrygl-4 {
  width: 100%;
  height: 202px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
} */
.l-addrygl-4-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.l-addrygl-4-1-right {
  color: #409eff;
  font-size: 14px;
  margin-right: 40px;
  cursor: pointer;
}
.l-addryg-footer {
  width: 100%;
  height: 100px;
  background: white;
  padding-top: 15px;
}
</style>